<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue入门 - 插件</title>
</head>
<body>
  <div id="container">
    <p v-my-directive="name"></p>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    (() => {
      const MyPlugin = {};
      MyPlugin.install = (Vue, options) => {
        // 定义全局方法
        Vue.myGlobalMethod = () => {
          console.log('Vue函数对象的方法myGlobalMethod()');
        };
        // 定义全局指令
        Vue.directive('my-directive', (el, binding) => {
          el.textContent = binding.value.toUpperCase();
        });
        // 定义实例方法
        Vue.prototype.$myMethod = () => {
          console.log('Vue实例对象的方法$myMethod()');
        };
      };
      window.MyPlugin = MyPlugin;
    })();
  </script>
  <script>
    Vue.use(MyPlugin);
    Vue.myGlobalMethod();
    const vm = new Vue({
      el: '#container',
      data: {
        name: 'Miracle He'
      }
    });
    vm.$myMethod();
  </script>
</body>
</html>
